<template>
  <div id="nav">
    <h3 class="logo"></h3>
    <router-link active-class="active" to="/">发现音乐</router-link>
    <router-link active-class="active" to="/my">我的音乐</router-link>
    <router-link active-class="active" to="/friend">朋友</router-link>
    <router-link active-class="active" to="/store">商城</router-link>
    <router-link active-class="active" to="/musician">音乐人</router-link>
    <router-link active-class="active" to="/download">下载客户端</router-link>
    <div class="search">
      <input type="text" />
      <input
        type="search"
        placeholder="音频/视频/电台/用户"
        v-model="query"
        @keyup.enter="searchMusic"
      />
    </div>
    <a href="" class="author"><span>创作者中心</span></a>
    <a href="javascript:;" class="login" @click="addModal = true"
      ><span>登录</span></a
    >
  </div>
  <router-view />
  <!-- 轮播 -->

  <footer>
    <div class="copy">
      <p class="link">
        <a href="">服务条款</a><span>|</span> <a href="">隐私条款</a
        ><span>|</span> <a href="">儿童隐私条款</a><span>|</span>
        <a href="">版权投诉指引</a><span>|</span> <a href="">意见反馈</a
        ><span>|</span>
        <a href="">广告合租</a>
      </p>
      <p>
        <span>网易公司版权所有©1997-2021</span>
        <span>杭州乐读科技有限公司运营：</span>
        <a href="">浙网文[2021] 1186-054号</a>
      </p>
      <p>
        <span>违法和不良信息举报电话：</span>
        <span>0571-89853516</span>
        <span>举报邮箱：</span>
        <a href="">ncm5990@163.com</a>
      </p>
      <p>
        <a href="">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
        <a href=""> 浙公网安备 33010902002564号</a>
      </p>
    </div>
    <div class="footer-right">
      <ul class="footlist clearfix">
        <li>
          <a href="" class="logos logo1"></a><span class="logott tt1"></span>
        </li>
        <li>
          <a href="" class="logos logo2"></a><span class="logott tt2"></span>
        </li>
        <li>
          <a href="" class="logos logo3"></a><span class="logott tt3"></span>
        </li>
        <li>
          <a href="" class="logos logo4"></a><span class="logott tt4"></span>
        </li>
        <li>
          <a href="" class="logos logo5"></a><span class="logott tt5"></span>
        </li>
      </ul>
    </div>
  </footer>
  <a href="javascript:;" @click="goback" v-show="backShow" class="goback"></a>
  <modal-slot v-model:modelValue="addModal">
    <div class="tel-login">
      <div class="tel-input">
        <a href="javascript:;">
          <span>+86</span>
          <span><i></i></span>
        </a>
        <input type="tel" v-model="phone" placeholder="请输入手机号" />
      </div>
      <input type="text" v-model="captcha" placeholder="请输入验证码" />
      <button @click="send">获取验证码</button>
      <div class="login-btn">
        <a href="javascript:;" class="login-btn-bg" @click="login" >登录</a>
      </div>
    </div>
  </modal-slot>
  <ul class="song_list">
    <li v-for="item in searchList" :key="item">
      <a href="javascript:;" @click="playMusic(item.id)"></a>
      <b>{{ item.name }}</b>
      <span v-if="item.mvid != 0" @click="playMV(item.mvid)"><i></i></span>
    </li>
  </ul>
</template>
<script>
import { ElMessage } from "element-plus";
import modalSlot from "./components/modelSlot.vue";
import axios from "axios";
export default {
  components: { modalSlot },
  data() {
    return {
      addModal: false,
      isShow: false,
      scrollH: "",
      windowH: "",
      backShow: false,
      query: "",
      searchList:[],
      phone:13525315534,
      captcha:""
    };
  },
  methods: {
    handleScroll() {
      let SH = document.scrollingElement.scrollTop;
      // let Wh = window.innerHeight;
      if (SH > 100) {
        this.backShow = true;
      } else {
        this.backShow = false;
      }
    },
  // 搜索
    searchMusic() {
      if (this.query == 0) {
        return;
      }
      axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(res => {
        console.log("搜索结果------",res);
            this.searchList = res.data.result.songs;// 保存内容
          })
          // 清空搜索
          this.query = '';
    },
    goback() {
      document.scrollingElement.scrollTop = 0;
    },
    send(){
      axios.get(`http://music.eleuu.com/captcha/sent?phone=${this.phone}`).then(res=>{
        console.log("验证码",res);
      })
    },
    login(){
      axios.get(`http://music.eleuu.com/captcha/verify?phone=${this.phone}&captcha=${this.captcha}`).then(res=>{
        console.log("验证登录",res);
        let { code, msg } = res;
      if (code * 1 == 200) {
        let { profile, token } = res;
        this.$store.commit("updateProfile", profile);
        this.$store.commit("setToken", token);
        // 存储token
        localStorage.setItem("token",token)

        console.log("路由传值", this.$route);
        let { query } = this.$route;
        if (query.toPath) {
          this.$router.push(query.toPath);
        }
      } else {
        ElMessage({
          showClose: true,
          message: msg,
          center: true,
        });
      }
      console.log("------res", res);
      })
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
};
</script>
<style>
@import "./assets/css/style.css";
.active {
  background: #000;
  color: #fff;
}
</style>